<template>
  <div>
    <a-page-header
      class='demo-page-header'
      style='border: 1px solid rgb(235, 237, 240)'
      :title='this.title'
      :sub-title='this.sub_title'
    >
      <template #tags>
        <a-tag color='blue' v-show='hasPatient'>{{ patientInfo.sex = 1 ? '男' : '女' }}</a-tag>
        <a-tag color='green' v-show='hasPatient'>{{ patientInfo.age }}岁</a-tag>
      </template>
      <a-statistic title='账户余额' prefix='￥' v-show='hasPatient' :value='this.model.balance'></a-statistic>
      <template #extra>
        <a-button @click='show'>读卡</a-button>
        <a-button>读码</a-button>
        <a-button type='primary' @click='handleClear'>重置</a-button>
      </template>
    </a-page-header>
    <a-modal v-model:visible='visible' title='选择读卡方式' @ok='handleOk'>
      <a-form-model :model='model' ref='form' :rules='validatorRules'>
        <a-form-model-item prop='cardType'>
          <a-radio-group v-model='model.type' @change='radioHandle'>
            <a-radio style='height: 30px;line-height: 18px' :value='1' checked>读卡</a-radio>
            <a-radio style='height: 30px;line-height: 18px' :value='2'>输入</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item prop='cardNumber'>
          <a-input v-model='model.cardNumber' placeholder='输入码' v-show='model.type===2' />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { getAction } from '../../api/manage'

export default {
  name: 'ReadCardHeader',
  data() {
    return {
      visible: false,
      title: '请录入卡号',
      sub_title: '',
      model: {
        cardNumber: '',
        cardType: '',
        balance: ''
      },
      patientInfo: {},
      hasPatient: false,
      validatorRules: {
        cardNumber: [
          { required: true, message: '请输入卡号' },
          { pattern: /^\S*$/, message: '不包含特殊字符' }
        ]
      }
    }
  },
  created() {
    let cardNumber = sessionStorage.getItem('cardNumber')
    console.log('缓存卡号', cardNumber)
    if (cardNumber !== 'null' && cardNumber !== null && cardNumber !== '') {
      this.model.cardNumber = cardNumber
      this.hasPatient = true
      this.getData()
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    handleOk() {
      if (this.model.type === 2) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.getData()
          } else {
            return false
          }
        })
      } else if (this.model.type === 1) {
        this.$message.success('读卡第三方未接入')
      }
    },
    getData() {
      getAction('/charge/comCardInfo/' + this.model.cardNumber, { keywords: 'card_patient' })
        .then((res) => {
          console.log('卡号查询返回', res)
          sessionStorage.setItem('cardNumber', this.model.cardNumber)
          sessionStorage.setItem('patientId', this.patientInfo.id)
          this.sub_title = '卡号:' + this.model.cardNumber
          if (!res.success) {
            this.title = '卡号未激活'
            this.$message.warn(res.message)
          } else {
            this.title = res.result.patient.patientName
            this.patientInfo = res.result.patient
            this.hasPatient = true
            this.model = res.result.card
            //传递父组件
            this.$emit('transfer', res.result)
          }
          this.visible = false
        })
    },
    radioHandle() {
      console.log('选择读卡方式', this.model)
    },
    handleClear() {
      if (this.model.cardNumber !== '') {
        console.log('清空卡号', this.model.cardNumber)
        this.model = {}
        this.patientInfo = {}
        this.hasPatient = false
      }
      this.title = '请录入卡号'
      this.sub_title = ''
      sessionStorage.removeItem('cardNumber')
      sessionStorage.removeItem('patientId')
      //清空病人表单
      this.$emit('clearData')
    }
  }
}
</script>

<style scoped>

</style>